<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 1. push
      // 参数：接收一个或多个参数
      // 作用：向指定数组尾部添加元素
      // 返回值：新数组的长度
      // 例如：
      const arr1 = ['a', 'b', 'c']
      arr1.push('d')
      console.log(arr1) // ['a', 'b', 'c', 'd']

      const res1 = arr1.push('e', 'f')
      console.log(arr1) // ['a', 'b', 'c', 'd', 'e', f]
      console.log(res1) // 6

      // 2.  pop
      // 参数：不用传参
      // 作用：向指定数组尾部删除
      // 返回值：从数组中删除的元素（当数组为空时返回undefined）。
      // 例如：
      const arr2 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
      arr2.pop()
      console.log(arr2) // ['a', 'b', 'c', 'd', 'e', 'f', 'g']

      const res2 = arr2.pop()
      console.log(arr2) // ['a', 'b', 'c', 'd', 'e', 'f']
      console.log(res2) // g

      // 3.  unshift
      // 参数：要添加到数组开头的元素。
      // 作用：将一个或多个元素添加到数组的开头
      // 返回值：返回调用方法对象的新 length 属性值。
      // 例如：
      const arr3 = ['a', 'b', 'c']
      arr3.unshift(1, 2, 3)
      console.log(arr3) // [1, 2, 3, 'a', 'b', 'c']

      const res3 = arr3.unshift('哈哈')
      console.log(arr3) // ['哈哈', 1, 2, 3, 'a', 'b', 'c']
      console.log(res3) // 7

      // 4.  shift
      // 参数：不传参
      // 作用：向指定数组头部删除
      // 返回值：从数组中删除的元素（当数组为空时返回undefined）。
      // 例如：
      const arr4 = ['a', 'b', 'c', 'd', 'e', 'f']
      arr4.shift()
      console.log(arr4) // ['b', 'c', 'd', 'e', 'f']

      const res4 = arr4.shift()
      console.log(arr4) // ['c', 'd', 'e', 'f']
      console.log(res4) // b

      // 5.  splice
      // 参数：要删除或替换的元素的下标,(要替换成的元素)
      // 作用：通过删除或替换现有元素来修改数组
      // 返回值：由被删除的元素组成的一个数组。如果没有删除元素，则返回空数组。
      // 例如：
      const arr5 = ['a', 'b', 'c', 'd', 'e', 'f']
      arr5.splice(3, 1)
      console.log(arr5) // ['b', 'c', 'd', 'e', 'f']

      const res5 = arr5.splice(3, 0, '哈哈')
      console.log(arr5) // ['a', 'b', 'c', '哈哈', 'e', 'f']
      console.log(res5) // []

      // 6.  map
      // 参数：(当前元素, 当前元素的索引, 方法调用的数组)
      // 作用：遍历并处理数组每一项
      // 返回值：一个新数组，每个元素都是回调函数的返回值。
      // 例如：
      const arr6 = [2, 4, 6, 8]
      const res6 = arr6.map((item, i, arr6) => {
        return item * item
      })
      console.log(arr6) // [2, 4, 6, 8]
      console.log(res6) // [4, 16, 36, 64]

      // 7.  forEach
      // 参数：(当前元素, 当前元素的索引, 方法调用的数组)
      // 作用：遍历数组每一项
      // 返回值：undefined
      // 例如：
      const arr7 = ['a', 'b', 'c', 'd', 1, 2, 3, 4]
      const res7 = arr7.forEach((item, i, arr7) => {
        return item
      })
      console.log(arr7) // ['a', 'b', 'c', 'd', 1, 2, 3, 4]
      console.log(res7) // undefined

      // 8.  reverse
      // 参数：不传参
      // 作用：颠倒指定数组
      // 返回值：颠倒后的数组
      // 例如：
      const arr8 = ['a', 'b', 'c', 'd', 1, 2, 3, 4]
      const res8 = arr8.reverse()
      console.log(arr8) // [4, 3, 2, 1, 'd', 'c', 'b', 'a']
      console.log(res8) // [4, 3, 2, 1, 'd', 'c', 'b', 'a']
    </script>
  </body>
</html>
